<template>
    <el-dialog
        v-model="props.visible"
        width="50%"
        @close="handleClose"
    >
        <template #header>
            <h2 class="agreement-title">用户守则</h2>
        </template>
        <div class="user-agreement-content">
            <p>
                更新日期: 2025-03-11
            </p>
            <p>
                欢迎使用我们的平台。在您使用平台服务之前，请仔细阅读以下用户守则。您的使用行为将视为对以下条款的认可与遵守。
            </p>
            <p>
                <strong>1. 尊重他人</strong><br />
                用户应尊重所有其他用户，不进行任何形式的人身攻击、骚扰或歧视性言论。
            </p>
            <p>
                <strong>2. 信息发布</strong><br />
                用户不得发布、传播任何违法、虚假、侵权或不当内容。平台保留对违反此条款的内容进行删除或限制展示的权利。
            </p>
            <p>
                <strong>3. 隐私与安全</strong><br />
                用户应妥善保护个人信息与账户安全。请勿泄露密码或其他敏感信息。
            </p>
            <p>
                <strong>4. 合规使用</strong><br />
                用户应遵守国家相关法律法规以及平台制定的各项规定，不得利用平台进行任何非法活动。
            </p>
            <p>
                <strong>5. 版权与知识产权</strong><br />
                用户发布的内容必须遵守相关版权及知识产权法律，未经授权不得转载或商业使用平台内容。
            </p>
            <p>
                感谢您对平台的信任与支持。我们致力于为用户提供安全、健康的网络环境，若有任何疑问或建议，欢迎随时联系我们。
            </p>
        </div>
        <template #footer>
            <el-button type="primary" @click="handleClose">关闭</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
//import { defineProps, defineEmits, computed } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})
const emits = defineEmits(['close'])
/* // 计算属性处理双向绑定
const isUserAgreementVisible = computed({
  get: () => props.visible,
  set: (val) => !val && emits('close')
}) */

const handleClose = () => {
  emits('close')
}
</script>

<style lang="scss" scoped>
.user-agreement-content {
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.6;
    p {
        /* 段落首行缩进2个字符，段间距0.5行 */
        text-indent: 2ch;
        margin-bottom: 0.5em;
    }
}
/* 弹窗标题居中 */
.agreement-title {
        text-align: center;
        margin: 0;
        font-size: 1.5em;
    }
</style>